AngularJS Event Handling

In AngularJS, event handling basically involves using methods and functions to respond to user interactions and other events in your application. 

Here is a detailed overview of event handling in AngularJS,

DOM events using directives

Directives in AngularJS allow you to extend HTML with custom behavior to include DOM manipulation and event handling logic. You can use directives to listen for DOM events such as clicks, mouseovers, and keydowns.

'click' event handling

<div ng-app="myApp" ng-controller="MyController">
 <button ng-click="handleClick()">Click me</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
 $scope.handleClick = function() {
   alert('Button clicked!');
 };
});
</script>

In the example above

• ng-click="handleClick()" is an AngularJS directive that binds the click event to the handleClick() function of the controller.
• When the button is clicked, the handleClick() function is executed, displaying a warning message.

Using the $event Object

You can pass the $event object to its event handler to obtain information about the event, such as target element, key codes, or mouse coordinates.

$event passed to the Event Handler

<div ng-app="myApp" ng-controller="MyController">
 <button ng-click="handleClick($event)">Click me</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
 $scope.handleClick = function(event) {
   alert('Button clicked! Target element: ' + event.target.tagName);
 };
});
</script>

Custom Event Handling

AngularJS also supports custom event handling using $emit, $broadcast, and $on methods to communicate between controllers and directives.

Custom Event Handling

<div ng-app="myApp">
 <div ng-controller="ParentController">
   <button ng-click="broadcastEvent()">Broadcast Event</button>
 </div>
 <div ng-controller="ChildController">
   <p>{{ message }}</p>
 </div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ParentController', function($scope) {
 $scope.broadcastEvent = function() {
   $scope.$broadcast('customEvent', 'Data from parent');
 };
});
app.controller('ChildController', function($scope) {
 $scope.$on('customEvent', function(event, data) {
   $scope.message = 'Event received in child: ' + data;
 });
});
</script>

Event Delegation

AngularJS supports event delegation which allows you to handle events on parent elements instead of binding event handlers directly to child elements. This can improve performance, especially with large lists or sharply designed objects.
 

Event Delegation

<div ng-app="myApp" ng-controller="MyController" ng-click="handleClick($event)">
 <button ng-click="handleClick($event)">Click me</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
 $scope.handleClick = function(event) {
   if (event.target.tagName === 'BUTTON') {
     alert('Button clicked!');
   }
 };
});
</script>

Overview

Directives- Handle DOM events declaratively with ng-click, ng-change, and ng-keydown.
Controllers- Define functions to handle events triggered by instructions.
Custom Events- Use $emit, $broadcast, and $on to handle scheduled events between controllers and instructions.
Event Delegation- Modify events on parent elements to improve performance and manage dynamic content.

Also, Read: Explain the custom directives in AngularJS